<template>

  <div class="part-one part-three">
    <div class="head">
      <div class="topZi">
        <div class="date font1">{{ time }}</div>
        <div class="title font1">四川省网上群众工作平台月报</div>
        <div class="department">川网传媒·麻辣社区 | 群众呼声 - 四川省网上群众工作平台</div>
      </div>
    </div>
    <div class="mybody">
      <div class="top-img-box">
        <img src="../../assets/image/mybody-top.png">
      </div>
      <div class="main">
        <div class="title">
          群众呼声
          <span class="desc">·月度留言关键词是哪些？</span>
        </div>
        <div class="key-wrap">
          {{ GuanjianciData[checkIDX].name }}
          <span class="desc">成留言关键词</span>
        </div>

        <div class="echarts-box3" :id="`tubiao3_${id}`"></div>

        <div class="tishi ">
          {{ time2 }}以来，
          <span class="desc">{{ GuanjianciData[checkIDX].name }}</span>{{ guanjianciTips }}
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="background-img-box">
        <img src="../../assets/image/footer-background.png" alt="麻辣社区">
      </div>
      <div class="logo-box">
        <img src="../../assets/image/footer-LOGO.png" alt="麻辣社区">
      </div>
    </div>
  </div>

</template>
<script>

import * as echarts from 'echarts';

export default {
  name: 'Lingyu',
  data() {
    return {
      chart: '',
      imgUrl: '',
    }
  },
  props: ['GuanjianciData', 'time', 'time2', 'checkIDX', 'guanjianciTips','id'],
  methods: {
    uuid() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0,
          v = c == 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    cinit() {
      let _this = this
      let barData = JSON.parse(JSON.stringify(this.GuanjianciData))
      let colorList = ['#95a5f8', '#f6ce7e', '#ef8d55', '#69d6d5', '#62a0f7']
      var options = {
        grid: {
          left: '4.5%',
          right: '4.5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            // alignWithLabel: false,
            show: false
          },
          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: '#fff'
            }
          }
        },

        yAxis: {
          axisTick: {
            // alignWithLabel: false,
            show: false
          },

          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: '#dddcde'
            }
          },
          type: 'category',
          axisLabel: {
            textStyle: {
              fontWeight: 'normal',
              fontSize: 18,
              fontSmoothing: 'auto',
              color: '#000',
            }
          },
          data: barData.map((item, index) => {
            return item.name
          })
        },
        series: [
          {
            type: 'bar',
            data: barData.map((item, index) => {
              item.value = item.count
              item.itemStyle = {
                barBorderRadius: [0, 5, 5, 0],
                color: colorList[index]
              }
              return item
            })
          }
        ]
      }
      this.$nextTick(() => {
        let chart = echarts.init(document.getElementById('tubiao3_'+this.id), null, { devicePixelRatio: 2 })
        chart.setOption(options)
      })
    }
  },
  mounted() {

  }
}
</script>
